<template>
	<div class="wrapper">
		<van-nav-bar fixed title="库存编辑" left-arrow @click-left="$utils.back($route.path);"></van-nav-bar>
		<div class="has-top">
			<div class="container">
				<div class="list">
					<div class="top flex-between">
						<div class="top_left">
							<div class="number">商品名称：{{ datas.ProductName }}</div>
							<div class="number" v-if="datas.V_DisplayAttribute">规格：{{ V_DisplayAttribute }}</div>
							<div class="number">货号：{{ datas.Sku }}</div>
						</div>
					</div>
					<div class="body">
						<div class="flex-start">
							<div class="title">现有库存</div>
							<div><van-field v-model="datas.StoreStock" type="number" readonly class=" fs-28 mt-15" /></div>
						</div>
						<div class="flex-start">
							<div class="title">调整</div>
							<div>
								<van-field v-model="storeStock" type="number" class=" fs-28 mt-15" placeholder-class="placeColor" />
							</div>
						</div>
						<div class="flex-start">
							<div class="title">备注</div>
							<div class="pr-20 bg-white mt-20"><van-field v-model="remark" type="textarea" class=" fs-28 mt-15"
									placeholder="" /></div>
						</div>
					</div>
				</div>
				<div class="footer">
					<div class="btn btn-success-hollow" @click="submit">保存</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
import {
	GetStoreSku,
	AddStoreSkuStock
} from 'api/product'
export default {
	components: {
		imgBox
	},
	data() {
		return {
			productId: '',
			skuId: '',
			datas: {},
			storeStock: 0,
			remark: '',
			V_DisplayAttribute: '',
		}
	},
	created() {
		// 商品IDthis.Status = this.$route.params.Status
		this.productId = this.$route.query.id
		this.skuId = this.$route.query.skuId
		this.GetStoreSku()
	},
	mounted() {

	},
	watch: {
		storeStock(newVal) {
			// 清除小数部分，但保留负号  
			this.storeStock = newVal.replace(/[^\d-]/g, '').replace(/(-?\d+)\.\d+/, '$1');

			// 如果输入为空或仅包含负号，则保持为空字符串  
			if (this.inputValue === '-' || this.inputValue === '') {
				this.storeStock = '';
			}
		}
	},
	methods: {
		GetStoreSku() {
			GetStoreSku({ productId: this.productId, skuId: this.skuId }).then((res) => {
				if (res.State == 1) {
					this.datas = res.Data
					if (this.datas.V_DisplayAttribute != '' && this.datas.V_DisplayAttribute.indexOf(':') !== -1) {
						this.V_DisplayAttribute = this.datas.V_DisplayAttribute.split(':')[1]
					}
				}
			})
		},
		submit() {
			let verify = true;
			let stock = parseInt(this.datas.StoreStock) + parseInt(this.storeStock)
			if (stock < 0) {
				this.$toast('扣减后不能是负数');
				return verify = false
			}
			if (!verify) {
				return
			}
			const params = {}
			params.productId = this.productId
			params.skuId = this.skuId
			params.storeStock = this.storeStock
			params.remark = this.remark
			AddStoreSkuStock(params).then((res) => {
				if (res.State == 1) {
					this.$toast('保存成功');
					setTimeout(e => {
						this.$utils.back()
					}, 1000)
				}
			})
		},

	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 24px 0 130px 0;
}

.list {
	padding: 24px;
	background: #FFFFFF;
	margin-bottom: 24px;
}

.top {
	font-size: 32px;
	color: #333;
	padding: 0 16px 16px 16px;
}

.number {
	font-size: 26px;
	color: #999;
}

.top_left {
	display: flex;
	flex-direction: column;

	div {
		padding: 7px 0;
	}
}

.body {
	background: #F4F5F6;
	padding: 0 24px 32px;
	margin-bottom: 16px;

	&>div {
		font-size: 26px;
		//height: 116px;
		color: #333333;
		margin-bottom: 10px;
	}

	input {
		width: 292px;
		height: 68px;
		background: #FFFFFF;
		border-radius: 4px;
		font-size: 32px;
		text-indent: 20px;
		@include color-primary();
		// font-weight: bold;
	}

	.title {
		width: 200px;
		padding-bottom: 16px;
	}
}

.placeColor {
	font-size: 28px;
	color: #999;
	font-weight: normal;
}

.btn {
	margin: 16px 30px 0 30px;
	width: 690px;
	height: 80px;
	border-radius: 40px;
	font-size: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
}

.footer {
	width: 750px;
	height: 120px;
	background: #FFFFFF;
	box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
	position: fixed;
	left: 0;
	bottom: 0;
}

.btn-success-hollow {
	@include color-primary();
	border: 1px solid;
	@include border-primary();
}

.flex-start {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status {
	font-size: 24px;
	border: 1px solid #999;
	padding: 5px 20px;
	border-radius: 20px;
	color: #999;
}

.comment {
	border: 0;
	padding: 8px;
}

.stetusNo {
	@include border-primary();
	@include color-primary();
}
</style>
